import React, { useEffect, useState } from 'react'
import http from '../api/index'
import { EyeOutline, StarOutline } from 'antd-mobile-icons'
import { InfiniteScroll } from 'antd-mobile'
import { LikeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
type Props = { sort?: 'latest' | 'hot' }

function List_todo1({ sort = 'hot' }: Props) {
    const [list, setlist] = useState<any[]>([])
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const [loading, setLoading] = useState(false)
    const pageSize = 10

    const loadPage = async (p: number) => {
        if (loading) return
        setLoading(true)
        try {
            const res = await http.get('/api/book/list', { params: { page: p, pageSize, sort } })
            let rows = Array.isArray(res?.data?.data) ? res.data.data : []
            console.log(rows);
            
            // 前端兜底排序：后端不支持 sort 时也能区分“最新/最热”
            if (sort === 'hot') {
                rows = [...rows].sort((a: any, b: any) => (Number(b?.textcount) || 0) - (Number(a?.textcount) || 0))
            } else {
                const toTime = (v: any) => v ? new Date(v).getTime() : 0
                rows = [...rows].sort((a: any, b: any) => toTime(b?.createTime || b?.doctortime) - toTime(a?.createTime || a?.doctortime))
            }
            setlist(prev => p === 1 ? rows : [...prev, ...rows])
            setHasMore(rows.length === pageSize)
            setPage(p)
        } finally {
            setLoading(false)
        }
    }
    useEffect(() => {
        // 当排序切换时，重置为第一页
        setlist([])
        setPage(1)
        setHasMore(true)
        loadPage(1)
    }, [sort])

    const loadMore = async () => {
        if (!hasMore || loading) return
        await loadPage(page + 1)
    }
    const nav=useNavigate()
    return (
        <div>
            {
                list.map((item, index) => {
                    return <div key={index}  onClick={() => nav(`/xq_todo/${item.doctorid}`)}
                    style={{ width: '100%', margin: '20px', borderBottom: '1px solid #ccc' }}>
                        <div style={{ display: 'flex', alignContent: 'center' }}>
                            <img src={item.doctorimage} alt="" style={{ width: '50px', height: '50px', borderRadius: '50px', objectFit: 'cover' }} />
                            <div>
                                <span>{item.doctorname}</span>
                                <br />
                                <span>{item.doctorstate}</span>
                            </div>
                        </div>
                        <div style={{ margin: ' 0 15px', marginRight: '20px' }}>
                            <p style={{ width: '350px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', margin: 0 }}>{item.texttitle}</p>
                            <p style={{ width: '350px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', margin: '4px 0 0 0' }}>(声明{item.textdise})</p>
                            <span style={{ display: 'inline-block', width: '350px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                                [基本信息] {item.textdescword}
                            </span>
                        </div>
                        <div>
                            <img src={item.textimage} alt="" style={{ width: '100px', height: '100px',border:'1px solid #ccc' ,marginLeft:'20px', objectFit: 'contain', background: '#f5f5f5'}} />
                        </div>
                        <div style={{ display: 'flex',margin:'10px' }}>
                            <span style={{margin:'0 15px',display:'flex',alignItems:'center'}}><EyeOutline />{item.textcount}万</span>
                            <span style={{margin:'0 35px',display:'flex',alignItems:'center'}}><StarOutline />{item.textdoctor}</span>
                            <span style={{margin:'0 35px',display:'flex',alignItems:'center'}}><LikeOutlined />{item.doctortime}</span>
                        </div>
                    </div>
                })
            }
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>
    )
}
export default List_todo1